<template>
  <full-page :startPage="startPage" showPageCtrl>
    <full-page-item>
      <div v-animate="{ className: 'animated fadeInLeft', page: 1 }" style="background: #DCDFE6;flex:1;">
        <p v-animate="{ className: 'animated bounce', page: 1 }">bounce</p>
        <p v-animate="{ className: 'animated flash', page: 1 }">flash</p>
        <p v-animate="{ className: 'animated pulse', page: 1 }">pulse</p>
        <p v-animate="{ className: 'animated rubberBand', page: 1 }">rubberBand</p>
      </div>
    </full-page-item>
    <full-page-item >
      <div v-animate="{ className: 'animated fadeInRight', page: 2 }" style="background: #606266;flex:1;">
        <p v-animate="{ className: 'animated shake', page: 2 }">shake</p>
        <p v-animate="{ className: 'animated headShake', page: 2 }">headShake</p>
        <p v-animate="{ className: 'animated swing', page: 2 }">swing</p>
        <p v-animate="{ className: 'animated tada', page: 2 }">tada</p>
      </div>
    </full-page-item>
    <full-page-item >
      <div v-animate="{ className: 'animated bounceInLeft', page: 3 }" style="background: #67C23A;flex:1;">
        <p v-animate="{ className: 'animated wobble', page: 3 }">wobble</p>
        <p v-animate="{ className: 'animated jello', page: 3 }">jello</p>
        <p v-animate="{ className: 'animated bounceIn', page: 3 }">bounceIn</p>
        <p v-animate="{ className: 'animated bounceInDown', page: 3 }">bounceInDown</p>
      </div>
    </full-page-item>
    <full-page-item >
      <div v-animate="{ className: 'animated bounceInRight', page: 4 }" style="background: #E6A23C;flex:1;">
        <p v-animate="{ className: 'animated bounceInLeft', page: 4 }">bounceInLeft</p>
        <p v-animate="{ className: 'animated bounceInRight', page: 4 }">bounceInRight</p>
        <p v-animate="{ className: 'animated bounceInUp', page: 4 }">bounceInUp</p>
        <p v-animate="{ className: 'animated bounceOut', page: 4 }">bounceOut</p>
      </div>
    </full-page-item>
    <full-page-item >
      <div v-animate="{ className: 'animated rotateIn', page: 5 }" style="background: #F56C6C;flex:1;">
        <p v-animate="{ className: 'animated bounceOutDown', page: 5 }">bounceOutDown</p>
        <p v-animate="{ className: 'animated bounceOutLeft', page: 5 }">bounceOutLeft</p>
        <p v-animate="{ className: 'animated bounceOutRight', page: 5 }">bounceOutRight</p>
        <p v-animate="{ className: 'animated bounceOutUp', page: 5 }">bounceOutUp</p>
      </div>
    </full-page-item>
  </full-page>
</template>

<script>
import FullPage from '../components/fullPage/FullPage.vue';
import FullPageItem from '../components/fullPage/FullPageItem.vue';

export default {
  name: 'FirstPage',
  components: {
    FullPage, FullPageItem
  },
  data(){
    return {
      startPage: 1
    }
  }
}
</script>
<style scoped>
  p{
    color: #303133;
  }
</style>
